<template>
  <div>
    <h1>组合式函数</h1>
    <p>x:{{ x }}</p>
    <p>y:{{ y }}</p>
    <hr />
    <p>请选择页面：</p>
    <select v-model="pageIndex">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <!-- 显示后端的数据 -->
    <ul v-if="data.length > 0">
      <div>data.length:{{ data.length }}</div>
      <li v-for="item in data">
        <p>item.proname:{{ item.proname }}</p>
      </li>
    </ul>
    <div v-else>加载中……………………</div>
  </div>
</template>

<script setup>

import { computed, ref, watch, watchEffect } from "vue";

import { usePostion, useGetData } from "../../hooks/index.js"


//一、 需求：鼠标在页面上移动，得到鼠标当前的位置（x,y);
let { x, y } = usePostion();

//  二、需求：组件一开始就需要从后端获取数据：
// 三、需求：当页码发生变化时，需要重新获取数据
let pageIndex = ref(1);

let url = computed(()=>"http://121.89.205.189:3001/api/pro/list?count="+pageIndex.value+"&limitNum="+10)

let { data, err } = useGetData(url);

</script>

<style scoped>

</style>